/* eslint-disable no-unused-vars */

import * as d3 from 'd3'
import {circleNode} from '../js/data/node'

export class CreateCircle {
  constructor(parameters) {
  }
  init(){
    // 获取父元素
    const d3Dom = d3.select('.d3_study')

    // 获取画布
    const mainsvg = d3Dom
      .append('svg')
      .classed('d_svg_paper',true)

    // 创建圆形
    circleNode.forEach((item)=>{
      createCircleNode(mainsvg,item)
    })

    // 创建圆形的函数
    function createCircleNode(parentDom,option) {
      const {cx,cy,r,color} = option
      const circle = parentDom.append('circle')
        .attr('cx', cx)
        .attr('cy', cy)
        .attr('r', r)
        .attr('fill', color)

      // 添加拖动事件
      const drag = d3.drag().on('drag', function (event) {
        circle
          .attr('cx', event.x)
          .attr('cy', event.y)
      })
      // 将拖动事件绑定到svg元素
      circle.call(drag)

      // 添加点击事件
      circle.on('click',function (event) {
        console.log(event,'圆被点击了！')
        console.log(option,'当前点击的圆')
      })
    }
  }
}
